<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>table</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="./jquery.min.js"></script>
</head>
<body>
	<div>
		<textarea rows="3" cols="300"  id="table_header" name="table_header" placeholder="表头，jsonArr(code,title)。HttpHelper.printTableHeader" ></textarea>
		<br/>
		<textarea rows="3" cols="300"  id="table_body" name="table_body" placeholder="表内容。jsonArr" ></textarea>
		<br/>
		<input type="button" id="show" value="展示"/>
	</div>
	<div id="table_div"></div>
<script>
	$(function() {
		$("#show").click(function () {
			let header = $.parseJSON($("#table_header").val());
			let body = $.parseJSON($("#table_body").val());
			//清空之前的数据
			$("#table_div").html("");
			let html = info2Html(body, header);
			console.log(html);
			$("#table_div").html(html);
		})
	});
	
	function info2Html(body, header){
		let objs = body;
		let tdCodes = [];
		let tableHeader = header.map(function(val, index, arr){
			tdCodes.push(val.code);
			return `<td>${val.title}</td>`;
		}).join();
		tableHeader = `<tr>${tableHeader}</tr>`;
		let tableBody = objs.map(function(val, index, arr){
			let temp = tdCodes.map(function(tdCode, index, arr){
				return `<td>${val[tdCode]}</td>`;
			}).join();

			return `<tr>${temp}</tr>`;
		}).join();
		return `<table border="1">${tableHeader}${tableBody}</table>`;
	}
	
</script>
</body>
</html>